<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
body {background:url(page_bg.png);}
img{ border:none}
*{ margin:0; padding:0; font-size:14px; color:#333}
.b{
    border-bottom-left-radius:3px;
    border-bottom-right-radius:3px;
    border-top-left-radius:3px;
    border-top-right-radius:3px;
    border-width:1px;
    border-style:solid;
    border-top-color:#dcdcdc;
    border-right-color:#dcdcdc;
    border-bottom-color:#dcdcdc;
    border-left-color:#dcdcdc;
    margin:5px auto 0;
    background-color:white;
    width:302px;
}

.b span {
    margin-left:10px;
}
    
div {
    background-color:white;
}

ul li{
	border-bottom:1px #ddd solid;
	list-style:none;
    padding:10px;
}


input {
	width:15px;
	height:15px;
    margin-right:10px;
}

.fl{ float:left}
.fr{ float:right}

.clearfix:after {clear:both; content:'';display: block;font-size: 0;line-height: 0;visibility: hidden; width: 0;height: 0;}
.clearfix {+display: inline-block;}
* html .clearfix {height: 1%;} 

.city {
	float:left;
}
</style>

<script>
//获取页面选中的值
//如果全选中，就返回all；如果什么都没有选，就是""；如果选中了，就是用逗号分隔各值
function select_result() {
    var result = new Array();
    var checkboxes = document.getElementsByTagName("input");

    for (var i = 0; i < checkboxes.length; i++) {
        if (checkboxes[i].checked == true) {
            result[result.length] = checkboxes[i].value;
        }
    }
    
    if (result.length == checkboxes.length) {
        return "all";
    }
    else if (result.length == 0) {
        return "";
    }
    else {
        return result.join(",");
    }
}

//根据全局变量cities绘制城市列表，每行2个
//cities没有定义，由OC向UIWebView传递
function show() {

	var row = Math.ceil(cities.length / 2);
	
	for (var i = 0; i < row; i++) {
		var inner_html = "<li class='clearfix'>";
		
		//每个循环必须要小于2，且当前显示的数量要小于cities的个数
		for (var j = 0; j < 2 && (i * 2 + j) < cities.length; j++) {
			inner_html += "<div class='city fl' style='width:140px;'> \
            	<label><input type='checkbox' value='" + cities[(i * 2 + j)] + "'>" + cities[(i * 2 + j)] + "</label>\
            	</div>";
		}
        inner_html += "</li>";
        
        list.innerHTML += inner_html;
	}
}

//显示选中的城
//如果city_string=all，就全部选中
//如果city_string=""，就全部不选中
//如果city_string不为前两种，就是逗号分隔的下标值，切割后使对应下标选中
function select_cities(city_string) {
    var checkboxes = document.getElementsByTagName("input");
    
    if (city_string == "all") {
        for (var i = 0; i < checkboxes.length; i++) {
            checkboxes[i].checked = true;
        }
    }
    else {
        for (var i = 0; i < checkboxes.length; i++) {
            checkboxes[i].checked = false;
        }
        
        if (city_string != "") {
            var city_id = city_string.split(',');

            for (var i = 0; i < city_id.length; i++) {
                for(var j = 0; j < checkboxes.length; j++) {
                    if(checkboxes[j].value == city_id[i]){
                        
                        checkboxes[j].checked = true;
                    }
                }
//                checkboxes[city_id[i]].checked = true;
            }
        }
    }
}
</script>
</head>

<body>
    <div id='param'></div>
	<div class="b">
    	<ul id="list">
            
        </ul>
    </div>
</body>
</html>
